<template>
  <!-- ok -->
  <view class="wanlpage-goods" :style="[pageData.style]">
    <view class="wanlshop-category-container__separate">
      <view class="line"></view>
      <view class="content">
        <text class="wlIcon-31guanzhuxuanzhong wanl-text-orange"></text>
        <text class="text-bold wanl-gray">热门推荐</text>
      </view>
      <view class="line"></view>
    </view>
    <wanl-product :dataList="data" :dataStyle="'col-' + pageData.params.colthree + '-' + pageData.params.colmargin" />
    <!-- 底部提示 -->
    <uni-load-more :status="status" :content-text="contentText" />
  </view>
</template>
<script>
export default {
  name: 'Goods',
  props: {
    pageData: {
      type: Object,
      default: function () {
        return {
          name: '商品组件',
          type: 'goods',
          params: {
            colmargin: '25',
            colthree: '2',
          },
          style: {
            'background-color': '#f5f5f5',
          },
          data: [],
        };
      },
    },
  },
  data() {
    return {
      data: [],
      current_page: 1, //当前页码
      last_page: 1, //总页码
      status: 'loading',
      contentText: {
        contentdown: '下拉加载更多',
        contentrefresh: '疯狂加载中...',
        contentnomore: '没有更多商品了',
      },
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData(type) {
      this.status = 'loading';
      // 判断上拉还是下拉
      if (type === 'upper') {
        this.current_page = 1;
      } else if (type === 'lower') {
        if (this.current_page >= this.last_page) {
          this.status = 'noMore';
          return false;
        } else {
          this.current_page += 1;
        }
      }
      // 请求数据
      await this.$api.get({
        url: '/wanlshop/page/goodsList',
        data: {
          page: this.current_page,
        },
        success: res => {
          // 商品
          if (type === 'lower') {
            this.data = this.data.concat(res.data);
          } else {
            this.data = res.data;
          }
          this.current_page = res.current_page; //当前页码
          this.last_page = res.last_page; //总页码
          // 判断是否还有数据
          if (res.current_page === res.last_page || res.total === 0) {
            this.status = 'noMore';
          } else {
            this.status = 'more';
          }
        },
      });
    },
    handleUpper() {
      this.loadData('upper');
    },
    handleLower() {
      this.loadData('lower');
    },
  },
};
</script>
<style lang="scss" scoped>
.wanlshop-category-container {
  &__separate {
    display: flex;
    align-items: center;
    justify-content: center;
    .line {
      width: 60rpx;
      height: 2rpx;
      background-color: #dedede;
    }
    .content {
      display: flex;
      align-items: center;
      margin: 0 50rpx;
      text + text {
        margin-left: 10rpx;
      }
      [class*='wlIcon-'] {
        font-size: 46rpx;
      }
    }
  }
}
</style>
